<template>
    <view class="filter-form">
        <view class="section-title center">
            {{ $t('filter-form.title') }}
        </view>

        <icon-label :text="$t('property.houseType')" icon="icon-property-type"></icon-label>
        <tag-selector @change="handleHouseTypeChange" :data="houseType"></tag-selector>
        <icon-label :text="$t('property.saleType')" icon="icon-pay"></icon-label>
        <tag-selector @change="handleSaleTypeChange" :data="saleType"></tag-selector>

        <icon-label :text="$t('property.price')" icon="icon-pricetag"></icon-label>
        <view class="flex-layout-row flex-center">
            <input type="number" class="form-input" v-model="filter.min" />
            <text class="gap-row">-</text>
            <input type="number" class="form-input" v-model="filter.max" />
        </view>

        <u-button class="gap-col-top2" type="primary" shape="circle" @click="handleFilter">
            {{ $t('filter-form.queryButton') }}
        </u-button>
    </view>
</template>

<script>
import { debug } from 'util';
import { mapGetters } from 'vuex';
export default {
    name: 'filter-form',
    data() {
        return {
            filter: {
                houseType: [],
                saleType: [],
                min: '',
                max: ''
            }
        };
    },

    computed: {
        ...mapGetters(['saleType', 'houseType'])
    },
    methods: {
        handleHouseTypeChange(name, value) {
            this.filter.houseType = value;
        },
        handleSaleTypeChange(name, value) {
            this.filter.saleType = value;
        },
        handleFilter() {
            this.$emit('filter', this.filter);
            this.clearFilter();
        },
        clearFilter() {
            this.filter = {
                houseType: [],
                saleType: [],
                min: '',
                max: ''
            };
        }
    }
};
</script>

<style lang="scss" scoped>
.filter-form {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    .form-item-title {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }
}
</style>